import { useEffect, useState } from 'react';
import HeadTitle from '../../components/headtitle';
import MainContainer from '../../components/maincontainer';
import Container from '../../components/container';
import { IData, Query as Q1, Result as R1 } from '../api/activity/avtivity.api';
import smartfetch from '../../atoms/smartfetch';
import api from '../../atoms/api';
import Btn from '../../components/btn';
import Infocontainer from './infocontainer';
import LeftLbl from './leftlbl';
import Value from './value';
import DateConvert from '../../atoms/date';
import pages from '../../atoms/pages';

export default function Content({ aid }: { aid: string }) {
	// 查询
	const [data, setData] = useState<IData>({} as IData);
	async function SearchData() {
		const d = await smartfetch<R1, Q1>(api['/api/activity/avtivity'], 'get', { aid });
		if (d) {
			setData(d.data);
		}
	}
	//执行
	useEffect(() => {
		void SearchData();
	}, [aid]);
	return <>
		<MainContainer>
			<HeadTitle title='发布结果' url={`${pages['/newactivityregistration']}?aid=${aid}`} />
			<Container>
				<div className='top'>
					<img className='img' src='/images/success.png' />
					<span className='title'>发布成功！</span>
					<Infocontainer>
						<LeftLbl title='活动主题' />
						<Value value={data.theme} />
					</Infocontainer>
					<Infocontainer>
						<LeftLbl title='发起人' />
						<Value value={data.username} />
					</Infocontainer>
					<Infocontainer>
						<LeftLbl title='活动开始时间' />
						<Value value={DateConvert(Number(data.starttime))} />
					</Infocontainer>
					<Infocontainer>
						<LeftLbl title='活动结束时间' />
						<Value value={DateConvert(Number(data.endtime))} />
					</Infocontainer>
				</div>
				<div className='bottom'>

					<Btn label='查看活动' onClick={() => {
						window.location.href = `${pages['/myactivity-initiator']}?aid=${data.aid}`;
					}} />
					<Btn label='发起新的活动' onClick={() => {
						window.location.href = pages['/newactivityregistration'];
					}} />
					<Btn label='返回首页' onClick={() => {
						window.location.href = pages['/'];
					}} />
				</div>
			</Container>
		</MainContainer>
		<style jsx>{`
.top{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 2;
padding-right: 2rem;
padding-left: 2rem;
}
.img{
width: 4.375rem;
height:  4.375rem;
}
.title{
font-size: 1.5rem;
color: rgba(0, 0, 0, 0.85);
margin: 1rem 0;
}
.bottom{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
}
		`}</style>
	</>;
}
